<template>
    <el-row class="cdetail-row">
        <el-col :span="24">
            <el-card class="box-card tinfo-head-box">
                <div slot="header" class="clearfix">
                    <div class="tinfo-title-header-box" style="background-image:url('/static/img/illustration/i004.jpg')">
                    </div>
                </div>
                <el-row class="user-title-row">
                    <el-col :span="24">
                        <div class="T-name-box" style="text-align: center;display: block;width: 100%;margin:0">
                            <h3 style="text-align: center;">{{courseData.name}}</h3>
                        </div>
                        <div class="clear"></div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="24">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>课程目录</span>
                    <div style="float: right">
                    </div>
                </div>
                <div>
                    <el-tree
                            class="filter-tree"
                            :data="treeData"
                            :props="defaultProps"
                            :expand-on-click-node="false"
                            :default-expanded-keys="[1,1]"
                            :filter-node-method="filterNode"
                            @node-click='toArticlePage'>
						 <span class="custom-tree-node" slot-scope="{node, data }">
							 <span>{{ node.label }}</span>
						 </span>
                    </el-tree>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
  import {getSectionStructure,saveSectionData,searchCourseData} from '../../api/api';
  export default {
    data() {
      return {
        courseId: '',
        userName: '',
        userId: '',
        courseData: [],
        datas: [],

        addFormVisible: false,
        saveLoading: false,
        showDialogType: 0,

        treeData: [],
        SN1Name:'',
        SN1Index: '',

        SN2SN1Index: 0,
        SN2SN1Name: '',
        SN2SN1ChildNum: 0,
        SN2Name:'',
        SN2Index: '',

        SN3SN1Index: 0,
        SN3SN1Name: '',
        SN3SN2Index: 0,
        SN3SN2Name:'',
        SN3Name:'',

        defaultProps: {
          children: 'childs',
          label: 'name'
        }
      };
    },

    methods: {
      getData(val1, val2) {
        console.log(val1 + '\n' + val2);
        let para = {
          courseId: val2,
          teacherId: val1,
        };
        getSectionStructure(para).then((res) => {
          console.log(res);
          if (res.data.data.length > 0) {
            this.datas = res.data.data[0];
            this.treeData = res.data.data[0].childs
          }
        });
      },

      getCourseData(val) {
        searchCourseData(val).then((res) => {
          console.log(res);
          this.courseData = res.data.data;
        });
      },

      remove(node, data) {
        const parent = node.parent;
        const children = parent.data.children || parent.data;
        const index = children.findIndex(d => d.id === data.id);
        children.splice(index, 1);
      },

      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      toArticlePage(val) {
        if (val.hasOwnProperty('childs')) {
        } else {
          this.$router.push({path: '/article?a=' + val.nodeId})
        }
      },
    },

    mounted: function () {
      function GetRequest() {
        let url = decodeURI(location.search);
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
          let str = url.substr(1);
          let strs = str.split("&");
          for(let i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
          }
        }
        return theRequest;
      }
      let urlData = GetRequest();
      this.getCourseData(urlData.c);


      let user = sessionStorage.getItem('user');
      user = JSON.parse(user);

      this.userId = user.id;
      this.userName = user.name;

      this.getData(urlData.t, urlData.c)
    }
  };
</script>